<template>
  <el-container>
    <el-main>
      <div class="block">
        <el-input placeholder="按用户名查询" v-model="logSearch.username" style="width: 150px" clearable/>
        <el-date-picker v-model="logSearch.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
        <el-button type="primary" round @click="logSearchBtn">查询</el-button>
        <el-button type="warning" round @click="logSearchDeleteBtn" v-if="btnPermission.loginLogDelete">清空日志</el-button>
      </div>
      <el-table :data="tableData" height="700" style="width: 98%">
        <el-table-column prop="username" label="用户名"/>
        <el-table-column prop="message" label="提示信息"/>
        <el-table-column prop="ip" label="登录IP"/>
        <el-table-column prop="loginTime" label="登录时间"/>
      </el-table>
      <el-pagination
        style="width: 90%;"
        :current-page="tablePage.currentPage"
        :page-sizes="[10, 20, 50, 100, 500]"
        :page-size="tablePage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tablePage.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>

<script>
import { loginLogList, loginLogDelete } from '@/api/logApi'
export default {
  name: "LoginLog",
  data() {
    return {
      logSearch: {
        username: '',
        time: []
      },
      tableData: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      btnPermission: {
        loginLogDelete: false
      }
    }
  },
  created() {
    this.loginLogList()
  },
  methods: {
    async loginLogList(){
      const { data } = await loginLogList({
        username: this.logSearch.username,
        time: this.logSearch.time,
        page: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize
      })
      this.tableData = data.data[0].records
      this.tablePage.total = data.data[0].total
      // 按钮权限设置
      const press = data.data[1]
      for (let s = 0; s < press.length; s++) {
        if (!this.btnPermission[press[s]]) {
          this.btnPermission[press[s]] = true
        }
      }
    },
    logSearchBtn() {
      this.loginLogList()
    },
    logSearchDeleteBtn(){
      this.$confirm('此操作将永久删除全部登录记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        loginLogDelete().then( res => {
          this.$message.success(res.data.msg)
          this.loginLogList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange: function(pageSize) {
      // 每页条数切换
      this.tablePage.pageSize = pageSize
      this.handleCurrentChange(this.tablePage.currentPage)
    },
    handleCurrentChange: function(currentPage) {
      this.loading = true
      // 页码切换
      this.tablePage.currentPage = currentPage
      this.loginLogList()
    }
  }
}
</script>
